<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>发布框</title>
    <script src="./vue copy.js"></script>
    <style>
      .warning {
        color: red;
      }
      #app{
        width: 350px;
        height: 500px;
        border: solid;
        border-radius: 30px;
        background-color: rgb(195, 207, 212);
      }
      input{
        border-radius: 30px;
        height: 30px;
        position: relative;
        top: 10px;
        left: 25px;
      }
      span{
        position: relative;
        top: 10px;
        left: 30px;
      }
      button{
        position: relative;
        top: 10px;
        left: 30px;
        width: 50px;
        height: 30px;
        border-radius: 30px;
        transform: translateX(13px);
        background-color: skyblue;
      }
      h2{
        position: relative;
        top: 200px;
        left: 90px;
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="input-box">
        <input type="text" v-model="inputValue" />
        <!-- warning 类名用于控制字体的颜色，当输入的长度大于30时，这个类名才生效 -->
        <span :class="{warning: inputValue.length > 30}"
          >{{inputValue.length}}/30</span
        >
        <!-- 
                1. 当输入的长度大于 30 时，才让按钮显示，所以这是一个条件渲染(使用 v-if)
                2. 当输入的长度大于 30 时，按钮 disabled 的值要为 true，这样就能禁用按钮
             -->
        <button
          @click="submit"
          v-if="inputValue.length > 0"
          :disabled="inputValue.length > 30"
        >
          发布
        </button>
      </div>

      <!-- 当输入的长度大于0时，代表有内容，有内容就渲染 comment-list，否则渲染 h2 标签提示空内容 -->
      <ul class="comment-list" v-if="list.length">
        <li v-for="value in list" :key="value">{{value}}</li>
      </ul>
      <h2 v-else>暂时没有评论</h2>
    </div>

    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          inputValue: "",
          list: [],
        },
        methods: {
          submit() {
            // 当输入的值为空，就直接返回
            if (!this.inputValue) return;

            this.list.push(this.inputValue);

            // 清空输入的值
            this.inputValue = "";
          },
        },
      });
    </script>
  </body>
</html>
